<template>
    <fieldset class="sndfathercom">
      <p>
          <ul>
            <li v-for="item in list" :key="item">
            序号：{{item.id}}-姓名：{{ item.uname }}-性别：{{ item.gender }}-身份：{{ item.shenfen }}
        </li>
          </ul>
      </p>
      <button @click="chuandi()">传递</button>
      <hr>
      <SndSonCom :sonmsg='msg'/>
    </fieldset>
  </template>
<script setup>
import { ref,reactive } from 'vue';
import SndSonCom from './SndSonCom.vue';
let list = reactive([
    {id:1,uname : '张思奥',gender : 0,shenfen : 1},
    {id:2,uname : '程橙子',gender : 1,shenfen : 2},
    {id:3,uname : '李琪瑶',gender : 0,shenfen : 2},
    {id:4,uname : '陈晓东',gender : 1,shenfen : 2},
    ])
 let  msg = ref('');
const chuandi = ()=>{
    msg.value = list
}

</script>
<style scoped>
.sndfathercom{
    width: 100%;
}
.sndfathercom ul{
    list-style: none;
}
.sndfathercom button{
    width:95% ;
    border: 0px;
    border-radius: 4px;
    background-color: teal;
    color: white;
    display: block;
    margin: 0 auto;
}
</style>